{% extends 'base.html' %}
{% block css %}
  #returnTop{
    position:fixed;
    right:3%;
    top:77%;
    z-index:2;
  }
  #returnTop:hover{
    cursor:pointer;
  }
  .pagination > li > a
  {
      background-color: white;
      color: #71c016;
  }
  .pagination > li > a:focus,
  .pagination > li > a:hover,
  .pagination > li > span:focus,
  .pagination > li > span:hover
  {
      color: #5a5a5a;
      background-color: #eee;
      border-color: #ddd;
  }
  .pagination > .active > a
  {
      color: white;
      background-color: #71c016 !Important;
      border: solid 1px #71c016 !Important;
  }
  .pagination > .active > a:hover
  {
      background-color: #71c016 !Important;
      border: solid 1px #71c016;
  }
{% endblock %}
{% block content %}
  <a id="returnTop" href="#Top"><img src="../static/images/返回顶部.png"></a>
  <div class="modal fade" id="showAllModal" tabindex="-1" aria-labelledby="showAllModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="showAllModalLabel"></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="showAllModalClose">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body"></div>
      </div>
    </div>
  </div>
  <div id="recommendList"></div>
  <nav aria-label="Page navigation example">
    <ul class="pagination justify-content-center">
      <li class="page-item">
        <a class="page-link" href="#" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <li class="page-item active"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item">
        <a class="page-link" href="#" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav>
{% endblock %}
{% block js %}
  $(function(){
    $('#Recommend_Module i').css('color','#71c016');
    $('#Recommend_Module span').css('color','#71c016');
    username=localStorage.getItem('username');
    pageSize=5;//页面显示条数
    currentPage=1; //默认显示第1页
    maxPage=10; //分页器底部最多显示的页数
    pageNum=0;
    $.ajax({
      type:"POST",
      url:"/recommend",
      data:{'username':username,'pageSize':pageSize,'maxPage':maxPage,'currentPage':currentPage},
      success:function(re){
        re=JSON.parse(re);
        if(re.msg==1){
          html='';
          data=re.data;
          pageNum=re.pageNum;
          for (var i = 0; i < pageSize; i++){
            html = html +'<div class="card quesiton-card">\
            <div class="card-header">\
              <div style="float:left">'+data[i].type+'</div>\
              <div style="float:left;margin-left:10px">【推荐值：'+data[i].score+'】</div>\
              <div style="float:right" ><img src="../static/images/未收藏.png" class="dislike"><img src="../static/images/收藏.png" class="like" style="display:none"></div>\
            </div>\
            <div class="card-body">\
              <div class="ask">'+data[i].content+'</div>\
              <div class="answer line__2">'+data[i].answer+'</div>\
              <div class="showAll" style="display:none">显示全部</div>\
              <div class="time">'+data[i].time+'</div>\
            </div>\
            </div>';
          }
          $('#recommendList').html(html);
          $('.answer').each(function(){
            if($(this).prop('scrollHeight') > $(this).height())
              $(this).siblings('.showAll').css('display', 'block');
          });
          if(pageNum<=maxPage){
            pagination_html='<li class="page-item">\
              <a id="Previous" class="page-link"  aria-label="Previous">\
                <span aria-hidden="true">&laquo;</span>\
              </a>\
            </li>\
            <li class="page-item active"><a class="page-link">1</a></li>';
            for (var i = 2; i <= pageNum; i++)
              pagination_html+='<li class="page-item"><a class="page-link">'+String(i)+'</a></li>';
          }
          pagination_html+='<li class="page-item">\
            <a id="Next" class="page-link" aria-label="Next">\
              <span aria-hidden="true">&raquo;</span>\
            </a>\
          </li>';
          $('.pagination').html(pagination_html);
        }
      }
    })
  })
  $(document).on('click','.showAll',function(){
    var answer=$(this).siblings(".answer").html();
    var ask=$(this).siblings(".ask").html();
    $('#showAllModal').modal('show');
    $('#showAllModalLabel').html(ask);
    $('#showAllModal .modal-body').html(answer);
  })
  $(document).on('click','.page-item',function(){
    var flag=1;//翻页标记
    if($(this).children('.page-link').prop('id')=='Next'){
      if(currentPage!=pageNum)
        currentPage+=1;
      else{
        text='已翻到最后一页！';
        flag=0;
      }
    }
    else if($(this).children('.page-link').prop('id')=='Previous'){
      if(currentPage!=1)
        currentPage-=1;
      else{
        text='已翻到第一页！';
        flag=0;
      }
    }
    else
      currentPage=parseInt($(this).children('.page-link').text());
    if(!flag){
      $('#liveToast').removeClass('hide');
      $('#liveToast').addClass('show');
      $('#toastText').html(text);
      setTimeout(function (){
        $('#liveToast').addClass('hide');
        $('#liveToast').removeClass('show');
      }, 3000);
    }else{
      $.ajax({
        type:"POST",
        url:"/recommend",
        data:{'username':username,'pageSize':pageSize,'maxPage':maxPage,'currentPage':currentPage},
        success:function(re){
          re=JSON.parse(re);
          if(re.msg==1){
            html='';
            data=re.data;
            for (var i = 0; i < data.length; i++){
              html = html +'<div class="card quesiton-card">\
              <div class="card-header">\
                <div style="float:left">'+data[i].type+'</div>\
                <div style="float:left;margin-left:10px">【推荐值：'+data[i].score+'】</div>\
                <div style="float:right" ><img src="../static/images/未收藏.png" class="dislike"><img src="../static/images/收藏.png" class="like" style="display:none"></div>\
              </div>\
              <div class="card-body">\
                <div class="ask">'+data[i].content+'</div>\
                <div class="answer line__2">'+data[i].answer+'</div>\
                <div class="showAll" style="display:none">显示全部</div>\
                <div class="time">'+data[i].time+'</div>\
              </div>\
              </div>';
            }
            $('#recommendList').html(html);
            $('.answer').each(function(){
            if($(this).prop('scrollHeight') > $(this).height())
              $(this).siblings('.showAll').css('display', 'block');
            });
            scrollTo(0,0);//返回顶端
            $('.page-item').each(function(){
              if($(this).hasClass('active'))
                $(this).removeClass('active');
            })
            $('.page-item').each(function(){
              if(parseInt($(this).children('.page-link').text())==currentPage)
                $(this).addClass('active');
            })
          }
        }
      })
    }
  })
  $('#showAllModalClose').click(function(){
    $('#showAllModal').modal('hide');
  })
{% endblock %}


